﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>LayIM 3.x PC版本地演示</title>

    <link rel="stylesheet" href="/scripts/layui/css/layui.css">
    <style>
        html {
            background-color: #333;
        }
    </style>
</head>
<body>
    @{
        Html.RenderPartial("~/Views/Shared/_LoginPartical.cshtml");
    }
    <script src="/scripts/layui/layui.js"></script>
    <script>
        var uid = getUserId();
        if (!uid) {
            initLogin();
        } else {
            initIM(uid);
        }

        
        function initLogin() {
            var content = ['<div style="padding: 20px; line-height: 22px; background-color: #fff; color:gray">'
                , ' <input id="txtUserAccount" type="text" name="title" autocomplete="off" placeholder="账号" class="layui-input">'
                , '<br/>'
                , '<input id="txtUserPwd" type="password" name="password" autocomplete="off" placeholder="密码" class="layui-input">',
                '<br/>注:无账号可自动注册</div>'].join('');
            layui.use('layer', function () {
                var layer = layui.layer;
                var $ = layui.jquery;
                var loginLayer = layer.open({
                    type: 1
                   , title: '用户登录' //不显示标题栏
                   , closeBtn: false
                   , area: '300px;'
                   , shade: 0.8
                   , id: 'LAY_LOGIN' //设定一个id，防止重复弹出
                   , btn: ['马上登录']
                   , moveType: 0 //拖拽模式，0或者1
                   , content: content
                   , success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.css('text-align', 'center');
                    }
                    , yes: function () {
                        var account =$.trim($('#txtUserAccount').val());
                        var pwd = $('#txtUserPwd').val();

                        if(account.length==0) {
                            layer.msg('请输入账号');
                            return;
                        }
                        if (pwd.length == 0) {
                            layer.msg('请输入密码');
                            return;
                        }
                        $.post('/login', { loginname: account, password: pwd }, function (res) {
                            if (res.code == 0) {
                                layer.close(loginLayer)
                                initIM(res.data);
                            }
                            else {
                                layer.alert(res.msg);
                            }
                        });
                   }
                });
            });
        }
        function initIM(uid){
            var base = '/scripts/im/rc/';
            //扩展socket组件
            layui.extend({
                rmlib: base + 'rmlib',
                protobuf: base + 'protobuf',
                socket: base + 'socket'
            });
            //
            layui.use(['layim', 'socket'], function (layim, socket) {

                //监听socket内部事件
                socket.on('status', function (status) {
                    console.log(status);
                });
                //socket配置
                socket.config({
                    uid: uid,
                    key: 'x4vkb1qpx41zk',//融云key
                    token: {
                        url: '/token',//这里配置自己的token服务域名
                        uselocal: true,//保存到本地,默认为true，（官方为了安全，不建议保存到本地，可以在服务器做token缓存）
                    },
                    layim: layim,
                    log:true,//打印内部操作日志，false，不打印，默认为true
                    autoConnect: true//是否自己连接，默认为true，如果传false，需要，手动调用 socket.open()
                });

                //基础配置（不用再担心监听发送消息的问题，socket已经帮你做好）
                layim.config({

                    //初始化接口
                    init: {
                        url: '/base'
                      , data: {
                          userid: uid
                      }
                    }
                    //查看群员接口
                  , members: {
                      url: 'json/getMembers.json'
                    , data: {}
                  }
                    //上传图片接口
                  , uploadImage: {
                      url: '/upload/image' //（返回的数据格式见下文）
                    , type: '' //默认post
                  }
                    //上传文件接口
                  , uploadFile: {
                      url: '/upload/file' //（返回的数据格式见下文）
                    , type: '' //默认post
                  }
                    //扩展工具栏
                  , tool: [{
                      alias: 'code'
                    , title: '代码'
                    , icon: '&#xe64e;'
                  }]

                    //,brief: true //是否简约模式（若开启则不显示主面板）

                    //,title: 'WebIM' //自定义主面板最小化时的标题
                    //,right: '100px' //主面板相对浏览器右侧距离
                    //,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
                  , initSkin: '5.jpg' //1-5 设置初始背景
                    //,skin: ['aaa.jpg'] //新增皮肤
                    //,isfriend: false //是否开启好友
                    //,isgroup: false //是否开启群组
                    //,min: true //是否始终最小化主面板，默认false
                  , notice: true //是否开启桌面消息提醒，默认false
                    //,voice: false //声音提醒，默认开启，声音文件为：default.wav

                  , msgbox: '/home/msgbox' //消息盒子页面地址，若不开启，剔除该项即可
                  , find: '/home/find' //发现页面地址，若不开启，剔除该项即可
                  , chatLog: '/home/chatlog' //聊天记录页面地址，若不开启，剔除该项即可

                });
            });
        }
    </script>
  
</body>
</html>
